<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">电子签名</block>
			</cu-custom>
			
			<view class="signatureViewClass">
				<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
					:openSmooth="openSmooth"></l-signature>
			</view>
			<view class="signatureViewBtn">
				<button class="mini-btn" type="primary" size="mini" @click="onClick('clear')">清空</button>
				<button class="mini-btn" type="warn" size="mini" @click="onClick('undo')">撤消</button>
				<button class="mini-btn" type="primary" size="mini" @click="onClick('save')">保存</button>
				<button class="mini-btn" type="warn" size="mini" @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "signature",
		data() {
			return {
				penColor: 'black',
				penSize: 5,
				url: '',
				modalName: null,
				openSmooth: true
			}
		},
		methods: {
			onClick(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// H5 生成的是base64
							this.url = res.tempFilePath
							this.RouterPage();
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			RouterPage() { //必须要这么写要保证上一个页面数据不会丢失
				/* 解决方案参考连接https://blog.csdn.net/Joye_7y/article/details/125648530 */
				let pages = getCurrentPages()
				// 2. 上一页面实例
				// 注意是length长度，所以要想得到上一页面的实例需要 -2
				// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length - 2];
				// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
				prevPage.$vm.getSignature(this.url);
			
				// 4. 返回上一页面
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			}
		}
	}
</script>

<style>
	.signatureViewClass{
		width: 100vw;
		height: 100vh;
		display: flex;
	}
	.mini-btn{
		margin-left: 25px;
	}
</style>